<template>
	<view class="xq">
		<!-- 详情页 布局-->
		<!-- 上部分 -->
		<!-- <block v-for="(item,index) in list" :key="index"> -->
			<view class="top">
				<image :src="'http://jd.itying.com/'+list.pic" mode="widthFix" lazy-load></image>
				<view class="top_title">{{list.title}}</view>
				<view class="top_sm">说明：{{list.sub_title}}</view>
				<view class="top_price">
					<view class="top_p" style="color: red;">{{list.price}}</view>
					<view class="top_old">原价：{{list.old_price}}</view>
				</view>
			</view>
			<view class="xq_middle">
				说明：> 极速送达 > 正品保证
			</view>
		<!-- </block> -->
		<!-- 类似选项卡 -->
		<view class="xx_xx">
			<block v-for="(v,index) in xx" :key="index">
				<view class="xx" :class="index==num?'a':'b'" @click="x(index)">{{v}}</view>
			</block>
		</view>
		<!-- 点击详情或评论显示 -->
			<template v-if="num==0">
				<view class="xq_xxk" v-html="detail" ></view>
			</template>
			<template v-else>
				<view class="xq_xxk"  >wo fhskf sdfsg </view>
			</template>
		<!--底部固定导航 -->
		<view class="xq_fiex">
			<view class="iconfont icon-weixin xq_fiex_ic"></view>
			<view class="xq_fiex_one" @click="shop">加入购物车</view>
			<view class="xq_fiex_two">立即购买</view>
		</view>
		<!-- 点击购物车，弹出规格，颜色等选项 -->
		<template v-if="isShop">
			<view class="xq_shop">
				<view class="xq_shop_one">
					<block v-for="(item,index) in list.attr" :key='index'>
						<view class="">{{item.cate}} : </view>
						<block v-for="(val,key) in item.list" :key='key'>
							<text class="xq_shop_two" @click="cc(val)">{{val}}</text>
						</block>
					</block>
				</view>
			</view>
		</template>
		<!-- 详情页布局结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:{},
				detail:'',
				xx:['详情','评论'],
				num:0,
				isShop:false,
				arr:[]
			}
		},
		onLoad(options) {
			var id=options.id;
			console.log(id+'详情页接受的id值');
			uni.request({
				url:'http://jd.itying.com/api/pcontent?id='+id,
				success: (res) => {
					console.log(res);
					var arr=res.data.result;
					arr.num=1;
					arr.check=false;
					 // 将图片路径中的 \ 替换为 /
					arr['pic'] = arr['pic'].replace(new RegExp(/\\/g), '/');
					// 将content数据中的img标签头替换了一个加style样式有宽度的头，否则图片宽度太大，有设置不了
					this.detail = arr.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
					this.list=arr;
					
				},fail: (msg) => {
					console.log('详情页接受id渲染数据失败');
				}
			})
		},
		methods: {
			x(k){//选项卡
				this.num=k;
			},
			shop(){//点击加入购物车，弹出规格
				// this.isShop=!this.isShop;
				uni.showToast({
					title:'加入购物车成功',
					icon:'success'
				})
				//点击购物车，将当前的数据对象传递到仓库中
				console.log(this.list);
				this.$store.commit('addShop',this.list);
			},
			cc(v){//点击规格的时候，添加到arr中，并加入样式
			console.log(v);
				
				//循环arr每一项，重复的去重，有点问题，不对
				// 将接口数据循环，给每一项添加一个active属性为false，当点击谁，active就为true
				// this.arr.push(v);
				// console.log(this.arr);
			}
		}
	}
</script>

<style lang="scss">
	// 点击加入购物车，弹框
	.xq_shop{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.4);
		.xq_shop_one{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 540upx;
			background-color:white;
			padding: 20upx;
			.xq_shop_two{
				display: inline-block;
				padding: 10upx 20upx;
				border: 1px solid #C0C0C0;
				margin: 14upx;
				border-radius: 10upx;
			}
		}
	}
	// 底部导航固定
	.xq_fiex{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		text-align: center;
		z-index: 1000;
		background-color: #FFFFFF;
		.xq_fiex_ic{
			font-size: 46upx;
			flex: 1;
			height: 100%;
		}
		.xq_fiex_one{
			flex: 1;
			height: 100%;
			background-color: red;
			color: #FFFFFF;
		}
		.xq_fiex_two{
			flex: 1;
			height: 100%;
			background-color:#F0AD4E;
			color: #FFFFFF;
		}
		
	}
	// 选项卡布局
	.xx_xx{
		height: 80upx;
		background-color: #FFFFFF;
		padding: 0 20upx;
		line-height: 80upx;
		color: red;
		margin: 20upx 0;
		display: flex;
		justify-content: space-around;
		.a{
			color: red;
		}
		.b{
			color: #C0C0C0;
		}
	}
	.xq_middle{
		height: 80upx;
		background-color: #FFFFFF;
		padding: 0 20upx;
		line-height: 80upx;
		color: red;
		margin: 20upx 0;
	}
	// 头部布局
	.top{
		padding: 10upx 20upx;
		// height: 480upx;
		background: white;
		// border: 1px solid #007AFF;
		image{
			// height: 240upx;
			display: block;
			margin: 0 auto;
			// border: 1px solid #007AFF;
		}
		.top_title{
			font-size: 30upx;
			font-weight: bold;
			margin: 20upx 0 0;
		}
		.top_sm{
			font-size: 26upx;
			color: #C0C0C0;
			margin: 20upx 0;
		}
		.top_price{
			display: flex;
		}
		.top_old{
			margin-left: 30upx;
			color: #C0C0C0;
			text-decoration: line-through;
		}
	}
	// 全局
	.xq{
		width: 100%;
		height: 100%;
		background-color:#C8C7CC;
		position: relative;
	}
</style>
